<script setup lang="ts">
import { Icon } from '@/components/core/icon';

import {
  ElDescriptions,
  ElDescriptionsItem,
  ElDivider,
  ElText,
} from 'element-plus';

defineOptions({
  name: 'WiFi',
});
</script>
<template>
  <div class="wifi">
    <div class="connect-status">
      <div class="item internet">
        <Icon class="size-20" icon="mdi:account-network" />
        我的网络
      </div>
      <div class="item link">
        <ElDivider> 1000 Mbps </ElDivider>
      </div>
      <div class="item route">
        <Icon class="size-20" icon="mdi:router-network-wireless" />
        路由器
      </div>
      <div class="item network">
        <ElDivider class="item">
          <Icon class="size-5" icon="mdi:access-point-network-off" />
          2.4G
        </ElDivider>
        <ElDivider> Lan </ElDivider>
        <ElDivider class="item">
          <Icon class="size-5" icon="mdi:access-point-network" />
          5G
        </ElDivider>
      </div>
      <div class="item pc">
        <Icon class="size-20" icon="mdi:wide-area-network" />
        终端
      </div>
    </div>
    <div class="connect-info">
      <ElDescriptions :column="2" border class="w-full" title="连接信息">
        <ElDescriptionsItem
          label="接口类型"
          label-align="right"
          label-class-name="label-style"
        >
          <ElText>eth0</ElText>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="IPv4" label-align="right">
          <ElText>192.168.16.214</ElText>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="默认网关" label-align="right">
          <ElText>192.168.17.1</ElText>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="子网掩码" label-align="right">
          <ElText>225.225.254.0</ElText>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="首选DNS" label-align="right">
          <ElText>8.8.8.8</ElText>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="备选DNS" label-align="right">
          <ElText>211.136.192.6</ElText>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="广播地址" label-align="right">
          <ElText>192.168.17.255</ElText>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="IPv6" label-align="right">
          <ElText>fe80::b020:705a:2202:8246</ElText>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="硬件地址" label-align="right">
          <ElText>C2:AD:6C:0E:F2:B4</ElText>
        </ElDescriptionsItem>
      </ElDescriptions>
    </div>
  </div>
</template>
